<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>工序模板设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="order-procedure-template">
      <div class="procedure-template-btn">
        <el-button size="medium" type="primary" @click="addTempl">新增模板</el-button>
      </div>
      <div class="procedure-template-table-div" :key="tableId">
        <el-table border fit :data="orderList" style="width: 100%" height="parent">
          <el-table-column label="模板名称" prop="name" width="150px" align="center"></el-table-column>
          <el-table-column label="模板工序" header-align="center">
            <template slot-scope="scope">
              <template v-for="workshopProcedure in scope.row.workshopProcedures">
                <div v-if="workshopProcedure.processList.length>0" :key="workshopProcedure.id" class="procedure-item-div">
                  <procedure-item :workshop-procedure="workshopProcedure" :order="scope.row" :is-remove="scope.row.hasRemove">
                  </procedure-item>
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="175px" align="center" fixed="right">
            <template slot-scope="scope">
              <div style="margin-bottom:5px;">
                <el-button size="mini" type="success" @click="updateTempl(scope.row)">添加工序</el-button>
                <el-button size="mini" type="primary" @click="removeProcedure(scope.row)">
                  <span v-if="scope.row.hasRemove">完成移除</span>
                  <span v-else>移除工序</span>
                </el-button>
              </div>
              <div>
                <el-button size="mini" type="danger" @click="deleteTempl(scope.row)">删除模板</el-button>
                <update-templ-btn :order="scope.row"></update-templ-btn>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="pagination.totalCount!==0" style="text-align:right;margin-top:5px;">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog :title="formType==='add'?'新增模板':'添加工序'" :visible.sync="openForm" top="5vh" width="600px" @closed="formClosed">
      <div style="height:calc(90vh - 54px);overflow:auto">
        <procedure-templ-form v-if="openForm" :order="selectOrder" :type="formType" :dropdown-option="dropdownOption" @save-success="saveSuccess">
        </procedure-templ-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="myJs/importFile.js"></script>
<script>
  importFile([
    "/engineering/procedureTemplSetting/css/procedureItem.css",
    "/engineering/procedureTemplSetting/css/procedureTemplForm.css"
  ]);

</script>
<script src="./engineering/procedureTemplSetting/procedureTemplForm.js"></script>
<script src="./engineering/procedureTemplSetting/procedureItem.js"></script>
<script src="./engineering/procedureTemplSetting/updateTemplBtn.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        orderList: [],
        tableId: SysUtil.getId(),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        openForm: false,
        formType: '',
        selectOrder: null,
        dropdownOption: {}
      };
    },

    created: function () {
      this.setOrerList();
    },

    methods: {
      setOrerList: function () {
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/getOrderProcedure', postData, false).then(function (res) {
          var orderList = res.returnData;
          if (orderList.length === 0 && currentPage !== 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setOrerList();
            });
            return;
          }

          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            var workshopProcedures = self.getWorkshopProcedures(order);
            order.workshopProcedures = workshopProcedures;
            order.hasRemove = false;
          }

          self.orderList = orderList;
          self.pagination.totalCount = res.iTotalRecords;
          self.tableId = SysUtil.getId();
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getWorkshopProcedures: function (order) {
        var workshopList = order.workShopList;
        if (SysUtil.isEmpty(workshopList)) {
          return [];
        }

        var workshopProcedures = [];
        for (var i = 0; i < workshopList.length; i++) {
          var data = workshopList[i];
          var processList = data.processList;
          if (SysUtil.isEmpty(processList)) {
            processList = [];
          }
          processList = _.map(processList, function (processObj) {
            return {
              id: processObj.id,
              processName: processObj.processName
            };
          });
          processList = SysUtil.sortDataByColumns(processList, [{
            sortField: 'processName',
            sortType: 'asc'
          }]);

          workshopProcedures.push({
            id: data.id,
            workshopName: data.workshopName,
            processList: processList
          });
        }

        return workshopProcedures;
      },

      pageChange: function () {
        this.setOrerList();
      },

      addTempl: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateTempl: function (order) {
        this.selectOrder = order;
        this.formType = 'update';
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setOrerList();
      },

      formClosed: function () {
        this.formType = '';
        this.selectOrder = null;
      },

      removeProcedure: function (order) {
        var hasRemove = order.hasRemove;
        order.hasRemove = !hasRemove;
      },

      deleteTempl: function (order) {
        var self = this;
        this.$confirm('是否确定删除该工序模板', '删除确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.toDeleteTempl(order.id);
        }).catch(function () {});
      },

      toDeleteTempl: function (id) {
        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/deleteTemplate', {
          id: id
        }).then(function () {
          self.loading = false;
          self.$alert('工序模板成功删除', '信息', {
            callback: function () {
              self.setOrerList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      ProcedureItem: ProcedureItem,
      ProcedureTemplForm: ProcedureTemplForm,
      UpdateTemplBtn: UpdateTemplBtn
    }
  });

</script>

<style>
  .order-procedure-template {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .order-procedure-template .procedure-template-btn {
    margin-bottom: 10px;
  }

  .order-procedure-template .procedure-template-table-div {
    flex: 1;
    overflow: auto;
  }

  .order-procedure-template .procedure-template-table-div .procedure-item-div {
    margin-bottom: 15px;
  }

  .order-procedure-template .procedure-template-table-div .procedure-item-div:last-child {
    margin-bottom: 0;
  }

  .order-procedure-template .procedure-template-table-div .el-button+.el-button {
    margin-left: 0;
  }

</style>

</html>
